<!--hpv考勤-->
<template>
    <el-card shadow="always" body-style="{ padding: '20px' }">
        <el-row>
            <el-form ref="form" :inline="true" :model="form" label-width="80px">
                <el-form-item label="部门名称">
                    <el-input v-model="form.departmentName"></el-input>
                </el-form-item>
                <el-form-item label="考勤时间">
                    <el-date-picker v-model="form.datetimeValue" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">查询</el-button>
                    <el-button type="success" @click="addorupdate('add')">添加</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed prop="date" label="工厂">
            </el-table-column>
            <el-table-column prop="name" label="部门名称">
            </el-table-column>
            <el-table-column prop="province" label="考勤日期">
            </el-table-column>
            <el-table-column prop="city" label="应出勤人数">
            </el-table-column>
            <el-table-column prop="address" label="实际出勤人数">
            </el-table-column>
            <el-table-column prop="zip" label="应出勤时长">
            </el-table-column>
            <el-table-column prop="zip" label="实际出勤时长">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="addorupdate('update', scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageConfig.currentPage"
            :page-size="pageConfig.pageSize" layout="total, prev, pager, next" :total="pageConfig.pageTotal">
        </el-pagination>
        <!--添加数据-->
        <el-dialog :title="addorupdateTitle === 'add' ? '添加hpv考勤数据' : '编辑hpv考勤数据'" width="30%"
            :visible.sync="addOrUpdateDialogVisible" :close-on-click-modal="false"
            :before-close="addOrUpdateHandleClose">
            <el-form ref="form" :model="addorupdateform" label-width="120px">
                <el-form-item label="部门名称">
                    <el-input v-model="addorupdateform.DepartmentName"></el-input>
                </el-form-item>
                <el-form-item label="考勤日期">
                    <el-date-picker v-model="addorupdateform.AttendanceDate" type="date" placeholder="选择日期"
                        style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addorupdateTitle === 'add' ? add : update">确定提交</el-button>
                    <el-button @click="addOrUpdateHandleClose">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-card>
</template>
<script>
export default {
    data() {
        return {
            addorupdateTitle: 'add',
            addOrUpdateDialogVisible: false,
            form: {
                datetimeValue: '',
                departmentName: ''
            },
            addorupdateform: {
                Id: '',
                ManufactureStationId: '',
                ManufactureFactoryId: '',
                DepartmentName: '',
                AttendanceDate: null,
                ShouldAttendanceCount: 0,
                PracticalAttendanceCount: 0,
                ShouldAttendanceDateTimeCount: 0,
                PracticalAttendanceDateTimeCount: 0
            },
            pageConfig: {
                currentPage: 1,
                pageSize: 10,
                pageTotal: 0
            },
            tableData: []
        }
    },
    mounted() {
        this.getdata()
    },
    methods: {
        handleCurrentChange(val) {
            this.pageConfig.currentPage = val
            this.getdata()
        },
        //查询数据
        getdata() {

        },
        //清除form表单数据
        clearform() {
            this.addorupdateform.Id = ''
            this.addorupdateform.ManufactureStationId = ''
            this.addorupdateform.ManufactureFactoryId = ''
            this.addorupdateform.DepartmentName = ''
            this.addorupdateform.AttendanceDate = null
            this.addorupdateform.ShouldAttendanceCount = 0
            this.addorupdateform.PracticalAttendanceCount = 0
            this.addorupdateform.ShouldAttendanceDateTimeCount = 0
            this.addorupdateform.PracticalAttendanceDateTimeCount = 0
        },
        //添加或编辑数据
        addorupdate(type, row) {
            this.addorupdateTitle = type
            this.addOrUpdateDialogVisible = true
            this.clearform()
            if (type !== 'add') {
                this.addorupdateform = row
            }
        },
        //添加
        add() {

        },
        //编辑
        update() {

        },
        //隐藏添加或编辑Dialog
        addOrUpdateHandleClose() {
            this.addOrUpdateDialogVisible = false
        }
    }
}
</script>